<template>
  <view class="error-handler">
    <!-- 网络错误 -->
    <view v-if="errorType === 'network'" class="error-content network-error">
      <image class="error-icon" src="/static/icons/network-error.png" mode="aspectFit"></image>
      <text class="error-title">网络连接异常</text>
      <text class="error-message">请检查网络设置后重试</text>
      <button class="retry-btn" @click="handleRetry">重新加载</button>
    </view>
    
    <!-- 服务器错误 -->
    <view v-else-if="errorType === 'server'" class="error-content server-error">
      <image class="error-icon" src="/static/icons/server-error.png" mode="aspectFit"></image>
      <text class="error-title">服务暂时不可用</text>
      <text class="error-message">服务器开小差了，请稍后再试</text>
      <button class="retry-btn" @click="handleRetry">重新加载</button>
    </view>
    
    <!-- 数据为空 -->
    <view v-else-if="errorType === 'empty'" class="error-content empty-error">
      <image class="error-icon" src="/static/icons/empty-data.png" mode="aspectFit"></image>
      <text class="error-title">暂无数据</text>
      <text class="error-message">{{ emptyMessage || '暂时没有相关内容' }}</text>
      <button v-if="showRefresh" class="retry-btn" @click="handleRetry">刷新</button>
    </view>
    
    <!-- 权限错误 -->
    <view v-else-if="errorType === 'permission'" class="error-content permission-error">
      <image class="error-icon" src="/static/icons/permission-error.png" mode="aspectFit"></image>
      <text class="error-title">访问受限</text>
      <text class="error-message">您没有权限访问此内容</text>
      <button class="retry-btn" @click="handleLogin">去登录</button>
    </view>
    
    <!-- 404错误 -->
    <view v-else-if="errorType === '404'" class="error-content not-found-error">
      <image class="error-icon" src="/static/icons/404-error.png" mode="aspectFit"></image>
      <text class="error-title">页面不存在</text>
      <text class="error-message">抱歉，您访问的页面不存在</text>
      <button class="retry-btn" @click="handleGoBack">返回上页</button>
    </view>
    
    <!-- 通用错误 -->
    <view v-else class="error-content general-error">
      <image class="error-icon" src="/static/icons/general-error.png" mode="aspectFit"></image>
      <text class="error-title">{{ errorTitle || '出错了' }}</text>
      <text class="error-message">{{ errorMessage || '发生了未知错误，请稍后重试' }}</text>
      <button class="retry-btn" @click="handleRetry">重试</button>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';

@Component
export default class ErrorHandler extends Vue {
  @Prop({ required: true }) errorType!: 'network' | 'server' | 'empty' | 'permission' | '404' | 'general';
  @Prop() errorTitle?: string;
  @Prop() errorMessage?: string;
  @Prop() emptyMessage?: string;
  @Prop({ default: true }) showRefresh!: boolean;
  
  @Emit('retry')
  handleRetry() {
    // 发出重试事件
  }
  
  @Emit('login')
  handleLogin() {
    // 跳转到登录页面
    uni.navigateTo({
      url: '/pages/login/login'
    });
  }
  
  @Emit('goBack')
  handleGoBack() {
    // 返回上一页
    uni.navigateBack({
      fail: () => {
        // 如果无法返回，跳转到首页
        uni.switchTab({
          url: '/pages/home/home'
        });
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.error-handler {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 40rpx;
}

.error-content {
  text-align: center;
  max-width: 500rpx;
  
  .error-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
    opacity: 0.8;
  }
  
  .error-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .error-message {
    display: block;
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 40rpx;
  }
  
  .retry-btn {
    padding: 20rpx 40rpx;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 25rpx;
    font-size: 28rpx;
    min-width: 200rpx;
    
    &:active {
      background-color: #0070f3;
    }
  }
}

// 不同错误类型的特殊样式
.network-error {
  .error-icon {
    filter: hue-rotate(0deg);
  }
  
  .retry-btn {
    background-color: #ff4d4f;
    
    &:active {
      background-color: #d9363e;
    }
  }
}

.server-error {
  .error-icon {
    filter: hue-rotate(30deg);
  }
  
  .retry-btn {
    background-color: #fa8c16;
    
    &:active {
      background-color: #d46b08;
    }
  }
}

.empty-error {
  .error-icon {
    filter: hue-rotate(60deg);
  }
  
  .retry-btn {
    background-color: #52c41a;
    
    &:active {
      background-color: #389e0d;
    }
  }
}

.permission-error {
  .error-icon {
    filter: hue-rotate(90deg);
  }
  
  .retry-btn {
    background-color: #722ed1;
    
    &:active {
      background-color: #531dab;
    }
  }
}

.not-found-error {
  .error-icon {
    filter: hue-rotate(120deg);
  }
  
  .retry-btn {
    background-color: #13c2c2;
    
    &:active {
      background-color: #08979c;
    }
  }
}

.general-error {
  .error-icon {
    filter: grayscale(20%);
  }
}

// 动画效果
.error-content {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.retry-btn {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  }
}
</style>